<template>
  <div class="order">
    <div class="top">
      <span>订单</span>
    </div>
    <div class="listObj" v-for="(v,i) in orderListObj" :key="i" >
      <img class="listImg" :src="'https://elm.cangdu.org/img/'+v.restaurant_image_url" alt="">
      <p class="listTop">
        <span class="listName" v-text="v.restaurant_name"></span>
        <span class="listStatus" v-text="v.status_bar.title"></span>
      </p>
<p class="listTime" v-text="v.formatted_created_at"></p>
      
<p class="listBottom"><span class="listGroup" v-for="(v1,i1) in v.basket.group " :key="i1" v-text="v1[0].name+'等'+v1.length+'件商品'"></span><span class="listTotal" v-text="'￥'+v.total_amount.toFixed(2)"></span></p>
    <el-button type="primary" plain @click="oneMore(v.restaurant_id)" class="oneMore">再来一单</el-button>
    </div>
    <bottomNav></bottomNav>
  </div>
</template>

<script>
import { mapState } from "vuex";
import BottomNav from "./BottomNav.vue";
export default {
  components: { BottomNav },
  name: "order",
  data() {
    return {
      orderListObj:"",
    };
  },
  created() {
    //修改底部的小标签
    this.$store.commit("getBottomActive", 2);
    this.getorderList()
  },
  methods: {
    getorderList(){
      let api=this.eleUrl.orderList+this.userLoginMsg.id+"/orders?limit=10&offset=0";
      this.$http({
        url:api,
        method:"get"
      }).then((res)=>{
        this.orderListObj=res.data;
        console.log(res.data)
      })
    },
    oneMore(id){
      this.$router.push({
        name:'shop',
        query:id
      })
    }
  },
  computed: {
    ...mapState(["eleUrl", "userLoginMsg", "bottomActive"]),
  },
};
</script>

<style scoped>
.order{
  font-size: .15rem;
  background-color: rgb(224, 224, 224);
}
.top {
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.2rem;
  color: white;
  height: 0.4rem;
  width: 100%;
  background-color: rgb(80, 143, 238);
}
/* 订单列表 */
.listObj{
  background-color: #fff;
  overflow: hidden;
  padding: .1rem;
}
.listImg{
  float: left;
  width: .7rem;
}
.listTop{
  overflow: hidden;
}
.listName{
  font-size: .2rem;
  float: left;
  width: 1.5rem;
}
.listStatus{
  float: right;
  margin-right: .2rem;
  color: gray;
}
.listTime{
  color: gray;
  float: left;
  line-height: .2rem;
}
.listBottom{
  float: left;
  line-height: .3rem;
}
.listTotal{
  color: rgb(221, 95, 11);
  font-size: .18rem;
  margin-left: 1rem;
}
.oneMore{
  margin-top: .1rem;
  float: right;
}
</style>